<template>
	<view class="wrapper" v-show="isShowMask">
		<transition name="content">
			<view class="content_view" v-show="isShow">
				<view class="title_view"><view class="title">请选择所在地区</view></view>
				<view class="select_top">
					<text
						class="has-choose"
						:class="index == showRank ? 'active' : ''"
						v-for="(item, index) in cityList"
						:key="index"
						@click="onRankClick(index)"
						v-show="index <= showRank"
					>
						{{ item.name != '0' ? item.name : '请选择' }}
					</text>
				</view>
				<swiper class="swiper" style="padding-top: 20rpx;">
					<swiper-item>
						<view class="swiper-item">
							<scroll-view id="city-item-box" class="scroll-view-item" scroll-y="true">
								<view
									class="address_item"
									style="display: flex;justify-content:space-between;align-items:center;"
									:class="item.key == valueObj[cityList[showRank].identify].value ? 'active' : ''"
									v-for="(item, index) in cityList[showRank].showList"
									:key="index"
									@click="onChooseClick(item)"
								>
									<view :class="item.key == valueObj[cityList[showRank].identify].value ? 'text-blue' : ''">{{ item.title }}</view>
									<view v-if="item.key == valueObj[cityList[showRank].identify].value"><text class="lg text-blue cuIcon-check"></text></view>
								</view>
								<!--
						<view class="address_item"  @click="onChooseClick(other)" v-if="showRank>1">
							<view>其它(如没有你的乡镇/街道请在详细地址输入)</view>			
						</view>	-->
							</scroll-view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</transition>
		<view class="mask" @click="hidden" v-show="isShowMask"></view>
	</view>
</template>

<script>
import api from '@/api/system/common.js';
export default {
	props: {
		value: {
			value: Array,
			default: []
		}
	},
	data() {
		return {
			isShow: false,
			isShowMask: false,
			other: {
				label: '',
				value: '0'
			},
			showRank: 0,
			cityList: [
				{
					identify: 'province',
					name: '0',
					showList: []
				},
				{
					identify: 'city',
					name: '0',
					showList: []
				},
				{
					identify: 'county',
					name: '0',
					showList: []
				},
				{
					identify: 'town',
					name: '0',
					showList: []
				}
			],
			valueObj: {
				province: {
					label: '',
					value: '0'
				},
				city: {
					label: '',
					value: '0'
				},
				county: {
					label: '',
					value: '0'
				},
				town: {
					label: '',
					value: '0'
				}
			}
		};
	},
	onReady() {
		const data = {};
		this.$http
			.post(api.getAreaList, data)
			.then(res => {
				const cityList = this.cityList;
				const province = {};
				province.identify = 'province';
				province.name = '0';
				province.showList = res.result;
				cityList.splice(0, 1, province);
				this.cityList = cityList;
				console.log(this.value)
				if (this.value && this.value.length > 0) {
					const len = this.value.length;
					for (const i in this.value) {
						const inValue = this.value[i];
						const thisCityList = this.cityList[i];
						if (thisCityList) {
							const thisShowList = thisCityList.showList;
							if (thisShowList && thisShowList.length > 0) {
								for (const index in thisShowList) {
									const item = thisShowList[index];
									if (item.key === inValue) {
										this.onChooseClick(item);
									}
								}
							}
						}
					}
				}
			})
			.catch(error => {});
	},
	methods: {
		show() {
			this.isShow = true;
			this.isShowMask = true;
		},
		hidden() {
			this.isShow = false;
			setTimeout(() => {
				this.isShowMask = false;
			}, 500);
		},
		onChooseClick(item) {
			if (item.children && item.children.length > 0) {
				this.valueObj[this.cityList[this.showRank].identify].label = item.title;
				this.valueObj[this.cityList[this.showRank].identify].value = item.key;
				this.cityList[this.showRank].name = item.title;
				this.showRank++;
				this.cityList[this.showRank].showList = item.children;
			} else {
				this.valueObj.town.label = '';
				this.valueObj.town.value = '0';
				this.valueObj[this.cityList[this.showRank].identify].label = item.title;
				this.valueObj[this.cityList[this.showRank].identify].value = item.key;
				this.cityList[this.showRank].name = item.title;
				this.$emit('confirm', this.valueObj);
				this.hidden();
			}
		},
		onRankClick(key) {
			const data = Object.assign({}, this.cityList);
			this.showRank = key;
			if (key == 0) {
				data[1].name = '0';
				this.valueObj.city.value = '0';
				this.valueObj.city.label = '';
				data[2].name = '0';
				this.valueObj.county.value = '0';
				this.valueObj.county.label = '';
				data[3].name = '0';
				this.valueObj.town.value = '0';
				this.valueObj.town.label = '';
			} else if (key == 1) {
				data[2].name = '0';
				this.valueObj.county.value = '0';
				this.valueObj.county.label = '';
				data[3].name = '0';
				this.valueObj.town.value = '0';
				this.valueObj.town.label = '';
			} else if (key == 2) {
				data[3].name = '0';
				this.valueObj.town.value = '0';
				this.valueObj.town.label = '';
			}
			this.cityList = data;
		}
	},
	mounted() {
		
	}
};
</script>

<style lang="scss">
.wrapper {
	z-index: 1999;
	position: absolute;
	top: -44px;
	left: 0;
	bottom: 0;
	right: 0;
	.content_view {
		z-index: 999;
		background-color: white;
		position: absolute;
		height: 60%;
		left: 0;
		bottom: 0;
		right: 0;
		.title_view {
			height: 100upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 $uni-spacing-row-sm;
			.title {
				font-size: uni-font-size-sm;
			}
		}
		.select_top {
			height: 40upx;
			font-size: 30upx;
			display: flex;
			justify-content: start;
			align-items: center;
			padding: 10upx;
			position: relative;
			box-sizing: border-box;
		}
		.swiper {
			height: 80%;
			position: relative;
			left: 0;
			top: 0;
			bottom: 0;
			right: 0;
			.swiper-item {
				height: 100%;
				.scroll-view-item {
					height: 100%;
					padding: 0 10px;
					.address_item {
						padding: 5px 0;
						font-size: 14px;
						display: flex;
						align-items: center;
						.address_item_icon {
							width: 20px;
							height: 20px;
							margin-right: 10px;
						}
					}
				}
			}
		}
	}
	.mask {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: $uni-text-color-grey;
		opacity: 0.7;
	}
}

.has-choose {
	margin-right: 50upx;
	border-bottom: 2px solid #f5f5f5;
}
.has-choose.active {
	color: #0faeff;
	border-color: #0faeff;
}
.city-item-box {
	height: 500upx;
}
.city-item {
	height: 80upx;
	border-bottom: 1upx solid #fff;
}
.city-item view {
	justify-content: center;
}
.city-item.active {
	color: #0faeff;
}
.flex-row {
	display: flex;
	flex-direction: column;
	flex-direction: row;
}
.pad-left {
	padding-left: 30upx;
}
</style>
